<template>
	<view class="page" :class="(!userInfo||!userInfo.USER_ID)?'no-footer':''">
		<view class="page-container" v-if="detail&&detail.id">
			<view class="room-cover">
				<image mode="widthFix" :src="imgList[0].src"></image>
			</view>
			<view class="room-info">
				<view class="room-name">{{detail.gdfXmName}}<text>{{detail.gdfFwxz}}</text></view>
				<view class="room-address">
					<u-icon name="map-fill" color="#666666" size="24rpx"></u-icon>
					{{detail.gdfFwdz}}
					<text class="to-map" v-if="detail.gdfJd&&detail.gdfWd" @click="toMap">点击查看</text>
				</view>
				<view class="count-bar">
					<view class="count-item">
						<view class="count-value" v-if="detail.gdfFwxz=='车位'">{{(detail.gdfQkzj/10000).toFixed(1)}}万元</view>
						<view class="count-value" v-if="detail.gdfFwxz!='车位'">{{(detail.gdfQkzj/10000).toFixed(1)}}万元</view>
						<view class="count-label">内购价格</view>
					</view>
					<view class="count-item flex40">
						<view class="count-value">{{detail.gdfFwhx}}</view>
						<view class="count-label">户型</view>
					</view>
					<view class="count-item" v-if="detail.gdfFwxz!='车位'">
						<view class="count-value">{{detail.gdfJzmj}}㎡</view>
						<view class="count-label">建筑面积</view>
					</view>
				</view>
				<view class="room-detail">
					<!-- <view class="room-detail-title">员工购买可享受免息分期及相关的金融支持方案</view> -->
					<view class="room-detail-item">内部编码：{{detail.gdfCode}}</view>
					<view class="room-detail-item">房源城市：{{detail.gdfCity}}</view>
					<view class="room-detail-item">归属销区：{{detail.gdfXq}}</view>
					<view class="room-detail-item">房号：{{detail.gdfNo}}</view>
					<!-- <view class="room-detail-item">市场调研单价：{{detail.gdfScdyjj}}元/平</view> -->
					<view class="room-detail-item" v-if="detail.gdfFwxz!='车位'">内购单价：{{detail.gdfQkdj}}元/平</view>
				</view>
				<!-- <view class="room-support-title">内部员工购房金融支持方案</view>
				<view class="room-support">
					<view class="room-support-item">3年付每年费用：{{detail.gdfSnfmnfy}}元</view>
					<view class="room-support-item">贷款额度：{{detail.gdfDked}}元</view>
					<view class="room-support-item">3年预计利息：{{detail.gdfSnlx}}元</view>
					<view class="room-support-item">3年分期后房屋总价：{{detail.gdfSnfqzj}}元</view>
					<view class="room-support-item">3年分期后房屋单价：{{detail.gdfSnfqdj}}元</view>
				</view> -->
				<view class="room-img-list" >
					<view class="room-img-item" v-for="(item, index) in imgList" v-if="item.show&&index>0" :key="index" @click="handlePreview(index, imgList)"><image mode="widthFix" :src="item.src"></image></view>
				</view>
			</view>
			<view class="user-info" v-if="userInfo&&userInfo.USER_ID">
				<view class="user-img"><image :src="userInfo.PICURL" mode="aspectFill"></image></view>
				<view class="user-detail">
					<view class="user-name">{{userInfo.MEM_NAME}}</view>
					<view class="user-code">工号：{{detail.gdfKf}}</view>
				</view>
				<view class="contact-btn" @click="toZx">立即咨询</view>
			</view>
		</view>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { getGdf } from "../../common/api/gdf.js";
	import { MemberInfoByMemCode } from "../../common/service.js";
	
	export default{
		data(){
			return {				
				imgPath:'https://pi.4006002222.com/hifimage/gdfinfo/',
				xOssProcess:'x-oss-process=image/resize,p_50',
				detail:{},
				imgList:[],
				userInfo:{}
			}
		},
		onLoad(options) {
			let that = this
			this.LOGINACTION()
			this.INITWXJSDK(this.CONFIG.appid, location.origin + location.pathname + location.search, ()=>{
				that.$wx.hideOptionMenu();
			},['hideOptionMenu'])
			this.id = options.id||''
			this.getDetail(this.id, ()=>{
				this.getUserInfo(this.detail.gdfKf)
				this.checkImgs(this.detail.gdfCode)
			})
		},
		methods:{
			handlePreview(current, imgs){
				let urls = []
				for(let i of imgs){
					urls.push(i.src)
				}
				uni.previewImage({
					current,
					urls,
					indicator:'number'
				})
			},
			getUserInfo(memcode){
				MemberInfoByMemCode({memcode}, res=>{
					if(res.data.status=='00000'){
						this.userInfo = res.data.data[0]
					}
				})
			},
			getDetail(id, call){
				uni.showLoading({
					title:'加载中...'
				})
				getGdf({id},res=>{
					uni.hideLoading()
					if(res.data.code==200){
						this.detail = res.data.data
						if(call){
							call()
						} 
					}else{
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'error',
							duration: 3000
						});
					}
				})
			},
			checkImgs(gdfCode){
				let that = this
				let num = 1
				let imgList = []
				while(num<=20){
					let src = this.imgPath + gdfCode + '/' + num + '.png?' + this.xOssProcess
					this.imgList.push({src, show:true})
					num++
				}
				for(let i of this.imgList){
					uni.getImageInfo({
						src:i.src,
						success:image=> {
							
						},
						fail:err=> {
							i.show = false
						}
					})
				}
			},
			toMap(){
				if(this.detail.gdfJd&&this.detail.gdfWd){
					uni.navigateTo({
						url:'map?latitude='+this.detail.gdfWd+'&longitude='+this.detail.gdfJd+'&name='+this.detail.gdfXmName
					})
				}
			},
			toZx(){
				if(this.detail.gdfKfUrl){
					location.href = this.detail.gdfKfUrl
				}
			},
		}
	}
</script>

<style scoped>
	.page{
		padding-bottom: 140rpx;
	}
	.page.no-footer{
		padding-bottom: 0;
	}
	.room-cover image{
		width: 750rpx;
		height: auto;
		vertical-align: top;
	}
	.room-name{
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		display: flex;
		align-items: center;
		padding: 0 36rpx;
		margin-top: 30rpx;
	}
	.room-name text{
		display: inline-block;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #386BED;
		width: 66rpx;
		line-height: 36rpx;
		text-align: center;
		background: #F1F3FF;
		border-radius: 4rpx;
		vertical-align: baseline;
		margin-left: 20rpx;
	}
	.room-address{
		/* display: flex;
		align-items: center; */
		padding: 0 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-top: 30rpx;
	}
	.room-address .u-icon{
		display: inline-block;
		margin-right: 6rpx;
	}
	.room-address .to-map{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		text-decoration: underline;
		color: #386BED;
		margin-left: 15rpx;
	}
	.count-bar{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 45rpx 30rpx 0 30rpx;
		padding-bottom: 40rpx;
		border-bottom: 1px solid #EDEDED;
	}
	.count-item{
		flex: 1;
		text-align: center;
	}
	.count-item.flex40{
		flex: 0 0 40%;
	}
	.count-value{
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #ED3C38;
	}
	.count-label{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-top: 15rpx;
	}
	.room-detail{
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		padding: 1rpx 30rpx 40rpx 30rpx;
	}
	.room-detail-title{
		margin-left: -30rpx;
		background: linear-gradient(86deg, #FF9B2F, #FFC56B);
		border-radius: 0px 10rpx 10rpx 0px;
		
		height: 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		padding: 0 13rpx;
	}
	.room-detail-item{
		flex: 0 0 50%;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 30rpx;
	}
	.room-support-title{
		width: 400rpx;
		line-height: 54rpx;
		background-image: url(../../static/roomInfo/title-bg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		padding: 0 23rpx;
		box-sizing: border-box;
		margin: 0 20rpx;
	}
	.room-support{
		background: #FFF8EE;
		border-radius: 0rpx 10rpx 10rpx 10rpx;
		margin: 0 20rpx;
		padding: 30rpx 30rpx 9rpx 30rpx;
	}
	.room-support-item{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-bottom: 27rpx;
	}
	.room-img-list{}
	.room-img-item{
		margin-bottom: 10rpx;
	}
	.room-img-item image{
		width: 100%;
		height: auto;
		vertical-align: top;
	}
	.user-info{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 16rpx 23rpx 16rpx 36rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
	}
	.user-img{
		flex: 0 0 auto;
	}
	.user-img image{
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		vertical-align: top;
	}
	.user-detail{
		flex:1;
		margin-left: 20rpx;
	}
	.user-name{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.user-code{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	.contact-btn{
		width: 235rpx;
		line-height: 80rpx;
		text-align: center;
		background: #386BED;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>
